<template>
    <div>
        <h3>鼠标悬浮在文件名和文件链接均能查看详情，如需复制点击复制即可,直接点击文件链接视为下载</h3>
    </div>
    <div class="ordering">
        <div>
            <el-table :data="data.item" width="100%">
                <el-table-column prop="htmlName" label="文件名">
                    <template #default="scope">
                        <span class="ellipsis" :title="scope.row.htmlName">{{ scope.row.htmlName }}</span>
                        <el-button type="text" @click="copyToClipboard(scope.row.htmlName)">复制</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="htmlAuthor" label="填报人名称"></el-table-column>
                <el-table-column prop="htmlBeginTime" label="填报时间"></el-table-column>
                <el-table-column prop="htmlCheck" label="审批人名称"></el-table-column>
                <el-table-column prop="htmlStatus" label="是否审批">
                    <template #default="scope">
                        <span v-if="scope.row.htmlStatus === '1'">已通过</span>
                        <span v-if="scope.row.htmlStatus === '2'">未通过</span>
                        <span v-if="scope.row.htmlStatus === '0'">未审核</span>
                    </template>
                </el-table-column>
                <!--                <el-table-column prop="htmlChangeTime" label="更改时间"></el-table-column>-->
                <el-table-column prop="htmlCheckTime" label="审批时间"></el-table-column>
                <!--                <el-table-column prop="htmlId" label="ID"></el-table-column>-->
                <el-table-column prop="htmlLink" label="文件链接">
                    <template #default="scope">
                        <a :href="scope.row.htmlLink" target="_blank" class="ellipsis"
                           :title="scope.row.htmlLink">{{ scope.row.htmlLink }}</a>
                        <el-button type="text" @click="copyToClipboard(scope.row.htmlLink)">复制</el-button>
                        <!--                        <el-button type="text" @click="previewFile(scope.row.htmlLink)">预览</el-button>-->
                    </template>
                </el-table-column>

            </el-table>
        </div>
        <el-drawer
                title="文件预览"
                :visible.sync="drawerVisible"
                direction="rtl"
                size="50%">
            <div v-html="fileContent" class="preview"></div>
        </el-drawer>
    </div>

</template>

<script>
import {onBeforeMount, reactive} from "vue";
import {urls} from "@/api/api";
import {get} from "@/api/request";
import {ElMessage} from "element-plus";

export default {
    name: "allForm",
    setup() {
        const data = reactive({item: []})
        const drawerVisible = reactive({value: false});
        const fileContent = reactive({value: ''});
        const getAll = async () => {
            try {
                const response = await get(urls.m().getAllForm);
                if (response.code === 200) {
                    console.log(response.data)
                    data.item = response.data;
                } else {
                    console.error('信息获取失败：' + response.data);
                }
            } catch (error) {
                console.error(error);
            }
        };
        const copyToClipboard = (text) => {
            navigator.clipboard.writeText(text).then(() => {
                ElMessage.success('复制成功');
            }).catch(() => {
                ElMessage.error('复制失败');
            });
        };
        const previewFile = (url) => {
            fetch(url)
                .then(response => response.text())
                .then(data => {
                    fileContent.value = data;
                    drawerVisible.value = true;
                })
                .catch(error => {
                    console.error('预览失败:', error);
                    ElMessage.error('预览失败');
                });
        };
        onBeforeMount(async () => {
            await getAll();
        });
        return {
            data,
            drawerVisible,
            fileContent,
            getAll,
            copyToClipboard,
            previewFile
        }
    }
}
</script>

<style scoped>
.ellipsis {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 限制显示两行 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}
</style>
